<div class="col-xs-12 js-container-div-role well-lg navbar-btn">
		<div class="table-responsive navbar-btn">
			<ul id = "myTab" class = "nav nav-tabs">
			   <li class = "active"><a href = "#users" data-toggle = "tab"><%- i18next.t('Users') %></a></li>			   
			   <li><a href = "#boards" data-toggle = "tab"><%- i18next.t('Boards') %></a></li>			
			   <li><a href = "#organizations" data-toggle = "tab"><%- i18next.t('Organizations') %></a></li>			
			</ul>
			<div id = "myTabContent" class = "tab-content">
			   <div class = "tab-pane fade in active" id = "users">
			   <div class="pull-right well-sm dropdown"><a title="Add Role" class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon-plus-sign"></i><span><%- i18next.t('Add Role') %></span></a>
			    <ul class="dropdown-menu arrow arrow-right">
					<li> 
						<div class="clearfix text-center col-xs-12">
							<span class="col-xs-10"><strong><%- i18next.t("Add Role") %></strong></span><i class="icon-remove cur"></i>
						</div>
					</li>
					<li class="col-xs-12 divider"></li>
					<li class="col-xs-12">
					    <form id="RoleAddForm" name="RoleAddForm" class="form-horizontal col-xs-12">
						  <div class="form-group required">
							<label class="sr-only control-label" for="inputName"><%- i18next.t("Name") %></label>
							<input type="name" name="name" id="inputName" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
						  </div>
						  <div class="form-group">
							<label class="sr-only control-label" for="submitAddRole"><%- i18next.t("Add") %></label>
							<input type="submit" class="btn btn-primary col-xs-12" id="submitAddRole" value="<%- i18next.t('Add') %>">
						  </div>
						</form>
					 </li>
				</ul>
			   </div>
			<table class="table js-acl-link-list acl-link-list">
				<thead>
					<th colspan="2" class="col-xs-15"><%- i18next.t('Name') %></th>
					<% roles.each(function(role) { %>
						<th class="col-xs-1 text-center">
						<div class="dropdown navbar-right"><a title="Edit Role" class="dropdown-toggle" data-toggle="dropdown">
						<%- i18next.t(role.attributes.name) %>
						<i class="icon-pencil"></i></a>
			    <ul class="dropdown-menu arrow arrow-right">
					<li> 
						<div class="clearfix text-center col-xs-12">
							<span class="col-xs-10"><strong><%- i18next.t("Edit Role") %></strong></span><i class="icon-remove cur"></i>
						</div>
					</li>
					<li class="col-xs-12 divider"></li>
					<li class="col-xs-12">
					    <form id="RoleEditForm" name="RoleEditForm" class="form-horizontal col-xs-12">
							<input type="hidden" name="id" value="<%- role.attributes.id %>">
						  <div class="form-group required">
							<label class="sr-only control-label" for="inputEditName"><%- i18next.t("Name") %></label>
							<input type="name" name="name" id="inputEditName" value="<%- role.attributes.name %>" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
						  </div>
						  <div class="form-group">
							<label class="sr-only control-label" for="submitEditRole"><%- i18next.t("Update") %></label>
							<input type="submit" class="btn btn-primary col-xs-12" id="submitEditRole" value="<%- i18next.t('Update') %>">
						  </div>
							<% if(parseInt(role.attributes.id) > 3) { %>
								<div class="form-group">
									<a href="#" title="Delete" class="js-delete-role btn btn-primary col-xs-12" data-role_id="<%- role.attributes.id %>"><%- i18next.t('Delete') %></a>											
								</div>
							<% } %>
						</form>
					 </li>
				</ul>
			   </div>
						</th>
					<% }); %>
				</thead>
				<tbody class="js-acl-link-list-body acl-link-list">
					<%
						var acl_link_groups = ["Guest", "Users"];     
						var group = '';
						var old_group = '';
						var group_id = '';
						acl_links.each(function(acl_link) {    
							if (acl_link.attributes.is_hide === 1) {
								return;
							}
							acl_link.acl_links_roles.add(acl_link.attributes.acl_links_roles);
							group_id = acl_link.attributes.group_id - 1;
							group = acl_link_groups[group_id];
					%>
							<% if (group != old_group) { %>
								<tr>
									<td colspan="5" class="text-primary"><h3><%- group %></h3></td>
								</tr>
							<% } %>
							<tr>
								<td class="col-xs-1"><div class="invisible"></div></td>
								<td><%- acl_link.attributes.name %></td>
								<%
									roles.each(function(role) {
										var is_enabled = acl_link.acl_links_roles.findWhere({
											role_id: parseInt(role.attributes.id)
										});
								%>
								<% if (role.attributes.id === "1") { %>      
									<td class="text-center">
									    <% if (acl_link.attributes.is_user_action === 1) { %>  
										    <div class="checkbox">
												 <input type="checkbox" class="cur" checked="checked">
												 <label></label>
                                            </div> 
										<% } else { %>      
											<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>">-</label>
										<% } %>   
									</td>     
								<% } else if (role.attributes.id === "2") { %>    
									<% if (acl_link.attributes.is_user_action === 1) { %>
										<td class="text-center">
											<div class="checkbox">
												<input type="checkbox" class="cur" name="acl_link_id[<%- role.attributes.id %>][<%- acl_link.attributes.id %>]" value="<%- acl_link.attributes.id%>" <% if(!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"/>
												<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"></label>
											</div>
										</td>
									<% } else { %>
										<td class="text-center">
											<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>">-</label>
										</td>
									<% } %>
								<% } else if(role.attributes.id === "3") { %>
									<% if (acl_link.attributes.is_guest_action === 1) { %>
										<td class="text-center">
											<div class="checkbox">
												<input type="checkbox" class="cur" name="acl_link_id[<%- role.attributes.id %>][<%- acl_link.attributes.id %>]" value="<%- acl_link.attributes.id%>" <% if(!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"/>
												<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"></label>
											</div>
										</td>
									<% } else { %>
										<% if (acl_link.attributes.name === 'View board') { %>
													<td class="text-center">
														<div class="checkbox">
															<input type="checkbox" class="cur" name="acl_link_id[<%- role.attributes.id %>][<%- acl_link.attributes.id %>]" value="<%- acl_link.attributes.id%>" <% if(!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"/>
															<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"></label>
														</div>
													</td>
										<% }else{  %>
												<td class="text-center">
													<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>">-</label>
												</td>
										<% } %>
									<% } %>
								<% } else { %>
									<% if (acl_link.attributes.is_user_action === 1 && acl_link.attributes.is_guest_action === 0) { %>
										<td class="text-center">
											<div class="checkbox">
												<input type="checkbox" class="cur" name="acl_link_id[<%- role.attributes.id %>][<%- acl_link.attributes.id %>]" value="<%- acl_link.attributes.id%>" <% if(!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"/>
												<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>"></label>
											</div>
										</td>
									<% } else { %>
										<td class="text-center">
											<label class="js-update-role" data-table="acl_links_roles" data-acl_link_id="<%- acl_link.attributes.id %>"  data-role_id="<%- role.attributes.id %>" for="acl_link_id_<%- role.attributes.id %>_<%- acl_link.attributes.id %>">-</label>
										</td>
									<% } %>
								<% } %>
							<% }); %>
						</tr>
					<%
							old_group = group;
						});
					%>
				</tbody>
			</table>
			   </div>
			   
			   <div class = "tab-pane fade" id = "boards">
			   <div class="pull-right well-sm dropdown">
					<a title="Add Board User Role" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-plus-sign"></i><span><%- i18next.t('Add Board User Role') %></span></a>
					<ul class="dropdown-menu arrow arrow-right">
						<li> 
							<div class="clearfix text-center col-xs-12">
								<span class="col-xs-10"><strong><%- i18next.t("Add Board User Role") %></strong></span><i class="icon-remove cur"></i>
							</div>
						</li>
						<li class="col-xs-12 divider"></li>
						<li class="col-xs-12">
							<form id="BoardUserRoleAddForm" name="BoardUserRoleAddForm" class="form-horizontal col-xs-12">
							  <div class="form-group required">
								<label class="sr-only control-label" for="inputBoardName"><%- i18next.t("Name") %></label>
								<input type="name" name="name" id="inputBoardName" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
							  </div>
							  <div class="form-group required">
								<label class="sr-only control-label" for="inputBoardDescription"><%- i18next.t("Description") %></label>
								<textarea name="description" id="inputBoardDescription" class="form-control js-role-name" placeholder="<%- i18next.t('Description') %>"></textarea>
							  </div>
							  <div class="form-group">
								<label class="sr-only control-label" for="submitAddBoardUserRole"><%- i18next.t("Add") %></label>
								<input type="submit" class="btn btn-primary col-xs-12" id="submitAddBoardUserRole" value="<%- i18next.t('Add') %>">
							  </div>
							</form>
						 </li>
					</ul>
			   </div>
			<table class="table js-acl-link-list acl-link-list">
				<thead>
					<th colspan="2" class="col-xs-15"><%- i18next.t('Name') %></th>
					<% board_user_roles.each(function(board_user_role) { %>
						<th class="col-xs-1 text-center">
						<div class="dropdown navbar-right">
							<a title="Edit Board User Role" class="dropdown-toggle" data-toggle="dropdown"><%- i18next.t(board_user_role.attributes.name) %><i class="icon-pencil"></i></a>
							<ul class="dropdown-menu arrow arrow-right">
								<li> 
									<div class="clearfix text-center col-xs-12">
										<span class="col-xs-10"><strong><%- i18next.t("Edit Board User Role") %></strong></span><i class="icon-remove cur"></i>
									</div>
								</li>
								<li class="col-xs-12 divider"></li>
								<li class="col-xs-12">
									<form id="BoardUserRoleEditForm" name="BoardUserRoleEditForm" class="form-horizontal col-xs-12">
									  <input type="hidden" name="id" value="<%- board_user_role.attributes.id %>">
									  <div class="form-group required">
										<label class="sr-only control-label" for="inputEditBoardName"><%- i18next.t("Name") %></label>
										<input type="name" name="name" value="<%- board_user_role.attributes.name %>" id="inputEditBoardName" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
									  </div>
									  <div class="form-group required">
										<label class="sr-only control-label" for="inputEditBoardDescription"><%- i18next.t("Description") %></label>
										<textarea name="description" id="inputEditBoardDescription" class="form-control js-role-name" placeholder="<%- i18next.t('Description') %>"><%- board_user_role.attributes.description %></textarea>
									  </div>
									  <div class="form-group">
										<label class="sr-only control-label" for="submitEditBoardUserRole"><%- i18next.t("Update") %></label>
										<input type="submit" class="btn btn-primary col-xs-12" id="submitEditBoardUserRole" value="<%- i18next.t('Update') %>">
									  </div>
										<% if(parseInt(board_user_role.attributes.id) > 3) { %>
											<div class="form-group">
												<a href="#" title="Delete" class="js-delete-board-user-role btn btn-primary col-xs-12" data-board_user_role_id="<%- board_user_role.attributes.id %>"><%- i18next.t('Delete') %></a>											
											</div>
										<% } %>
									</form>
								 </li>
							</ul>
					   </div>
						</th>
					<% }); %>
				</thead>
				<tbody class="js-acl-link-list-body acl-link-list">
					<%
						var acl_board_links_groups = ["Boards","Lists","Cards"];
						var group = '';
						var old_group = '';
						var group_id = '';
						acl_board_links.each(function(acl_board_link) {
							if (acl_board_link.attributes.is_hide === 1) {
								return;
							}
							acl_board_link.acl_board_links_boards_user_roles.add(acl_board_link.attributes.acl_board_links_boards_user_roles);
							group_id = acl_board_link.attributes.group_id - 2;
							group = acl_board_links_groups[group_id];
					%>
							<% if ( group != old_group) { %>
								<tr>
									<td colspan="5" class="text-primary"><h3><%- group %></h3></td>
								</tr>
							<% } %>
							<tr>
								<td class="col-xs-1"><div class="invisible"></div></td>
								<td><%- acl_board_link.attributes.name %></td>
								<%
									board_user_roles.each(function(board_user_role) {
										var is_enabled = acl_board_link.acl_board_links_boards_user_roles.findWhere({
											board_user_role_id: parseInt(board_user_role.attributes.id)
										});
								%>
										<td class="text-center">
											<div class="checkbox">
												<input type="checkbox" class="cur" name="acl_link_id[<%- board_user_role.attributes.id %>][<%- acl_board_link.attributes.id %>]" value="<%- acl_board_link.attributes.id%>" <% if(!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_board_id_<%- board_user_role.attributes.id %>_<%- acl_board_link.attributes.id %>"/>
												<label class="js-update-role" data-table="acl_board_links_boards_user_roles" data-acl_link_id="<%- acl_board_link.attributes.id %>"  data-role_id="<%- board_user_role.attributes.id %>" for="acl_link_board_id_<%- board_user_role.attributes.id %>_<%- acl_board_link.attributes.id %>"></label>
											</div>
										</td>
								<% }); %>
							</tr>
							<% old_group = group; %>
					<%
						});
					%>
				</tbody>
			</table>
			   </div>
			   
			   <div class = "tab-pane fade" id = "organizations">
			   <div class="pull-right well-sm dropdown"><a title="Add Organization User Role" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-plus-sign"></i><span><%- i18next.t('Add Organization User Role') %></span></a>
			   <ul class="dropdown-menu arrow arrow-right">
						<li> 
							<div class="clearfix text-center col-xs-12">
								<span class="col-xs-10"><strong><%- i18next.t("Add Organization User Role") %></strong></span><i class="icon-remove cur"></i>
							</div>
						</li>
						<li class="col-xs-12 divider"></li>
						<li class="col-xs-12">
							<form id="OrganizationUserRoleAddForm" name="OrganizationUserRoleAddForm" class="form-horizontal col-xs-12">
							  <div class="form-group required">
								<label class="sr-only control-label" for="inputOrganizationName"><%- i18next.t("Name") %></label>
								<input type="name" name="name" id="inputOrganizationName" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
							  </div>
							  <div class="form-group required">
								<label class="sr-only control-label" for="inputOrganizationDescription"><%- i18next.t("Description") %></label>
								<textarea name="description" id="inputOrganizationDescription" class="form-control js-role-name" placeholder="<%- i18next.t('Description') %>"></textarea>
							  </div>
							  <div class="form-group">
								<label class="sr-only control-label" for="submitAddOrganizationUserRole"><%- i18next.t("Add") %></label>
								<input type="submit" class="btn btn-primary col-xs-12" id="submitAddOrganizationUserRole" value="<%- i18next.t('Add') %>">
							  </div>
							</form>
						 </li>
					</ul>
			   </div>
				<table class="table js-acl-link-list acl-link-list">
				<thead>
					<th colspan="2" class="col-xs-15"><%- i18next.t('Name') %></th>
					<% organization_user_roles.each(function(organization_user_role) { %>
						<th class="col-xs-1 text-center">
							<div class="dropdown navbar-right"><a title="Edit Organization User Role" class="dropdown-toggle" data-toggle="dropdown"><%- i18next.t(organization_user_role.attributes.name) %><i class="icon-pencil"></i></a>
							   <ul class="dropdown-menu arrow arrow-right">
										<li> 
											<div class="clearfix text-center col-xs-12">
												<span class="col-xs-10"><strong><%- i18next.t("Edit Organization User Role") %></strong></span><i class="icon-remove cur"></i>
											</div>
										</li>
										<li class="col-xs-12 divider"></li>
										<li class="col-xs-12">
											<form id="OrganizationUserRoleEditForm" name="OrganizationUserRoleEditForm" class="form-horizontal col-xs-12">
											<input type="hidden" name="id" value="<%- organization_user_role.attributes.id %>">
											  <div class="form-group required">
												<label class="sr-only control-label" for="inputEditOrganizationName"><%- i18next.t("Name") %></label>
												<input type="name" name="name" id="inputEditOrganizationName" value="<%- organization_user_role.attributes.name %>" class="form-control js-role-name" placeholder="<%- i18next.t('Name') %>" required>
											  </div>
											  <div class="form-group required">
												<label class="sr-only control-label" for="inputEditOrganizationDescription"><%- i18next.t("Description") %></label>
												<textarea name="description" id="inputEditOrganizationDescription" class="form-control js-role-name" placeholder="<%- i18next.t('Description') %>"><%- organization_user_role.attributes.description %></textarea>
											  </div>
											  <div class="form-group">
												<label class="sr-only control-label" for="submitEditOrganizationUserRole"><%- i18next.t("Update") %></label>
												<input type="submit" class="btn btn-primary col-xs-12" id="submitEditOrganizationUserRole" value="<%- i18next.t('Update') %>">
											  </div>
												<% if(parseInt(organization_user_role.attributes.id) > 3) { %>
													<div class="form-group">
														<a href="#" title="Delete" class="js-delete-organization-user-role btn btn-primary col-xs-12" data-organization_user_role_id="<%- organization_user_role.attributes.id %>"><%- i18next.t('Delete') %></a>											
													</div>
												<% } %>
											</form>
										 </li>
									</ul>
							   </div>
						</th>
					<% }); %>
				</thead>
				<tbody class="js-acl-link-list-body acl-link-list">
					<%
						var acl_organization_links_groups = ["Organizations"];
						var group = '';
						var old_group = '';
						var group_id = '';
						acl_organization_links.each(function(acl_organization_link) {
							acl_organization_link.acl_organization_links_organizations_user_roles.add(acl_organization_link.attributes.acl_organization_links_organizations_user_roles);
							group_id = acl_organization_link.attributes.group_id - 5;
							group = acl_organization_links_groups[group_id];
					%>
						<% if (group != old_group) { %>
							<tr>
								<td colspan="5" class="text-primary"><h3><%- group %></h3></td>
							</tr>
						<% } %>
						<tr>
							<td class="col-xs-1"> <div class="invisible"></div></td>
							<td><%- acl_organization_link.attributes.name%></td>
							<% 
								organization_user_roles.each(function(organization_user_role) {									
									var is_enabled = acl_organization_link.acl_organization_links_organizations_user_roles.findWhere({
										organization_user_role_id: parseInt(organization_user_role.attributes.id)
									});
							%>
									<td class="text-center">
										<div class="checkbox">
											<input type="checkbox" class="cur" name="acl_link_id[<%- organization_user_role.attributes.id %>][<%- acl_organization_link.attributes.id %>]" value="<%- acl_organization_link.attributes.id%>" <% if (!_.isEmpty(is_enabled)) { %> checked="checked" <% } %> id="acl_link_org_id_<%- organization_user_role.attributes.id %>_<%- acl_organization_link.attributes.id %>"/>
											<label class="js-update-role" data-table="acl_organization_links_organizations_user_roles" data-acl_link_id="<%- acl_organization_link.attributes.id %>"  data-role_id="<%- organization_user_role.attributes.id %>" for="acl_link_org_id_<%- organization_user_role.attributes.id %>_<%- acl_organization_link.attributes.id %>"></label>
										</div>
									</td>
							<% }); %>
						</tr>
						<% old_group = group; %>
					<% }); %>
				</tbody>
			</table>
			   </div>
			</div>
		</div>
</div>